<template>
  <div class="news-detail">
    <div>
      <h4>{{ newsInfo.title }}</h4>
      <div class="news-infos flex a-center">
        <span>{{ newsInfo.authorName }}</span>
        <div class="news-tags">
          <span v-for="tag in newsInfo.tags" :key="tag">{{ tag }}</span>
        </div>
      </div>
      <div class="pic-box">
        <img :src="newsInfo.img" />
      </div>
      <div class="news-content">{{ newsInfo.detail }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewsDetail",
  props: ["newsInfo", "id"],
  created() {
    console.log(this.newsInfo, this.id);
  },
};
</script>

<style scoped>
.news-detail {
  padding: 8px;
}
.news-detail h4 {
  margin: 5px 0;
}
.news-infos {
  font-size: 14px;
  color: var(--gray);
}
.news-tags {
  margin-left: 5px;
  color: #fff;
}
.news-tags > span {
  display: inline-block;
  border-radius: 3px;
  padding: 2px 3px;
  background: rgb(212, 212, 212);
  margin-right: 3px;
}
.pic-box {
  margin: 10px 0;
}
.pic-box img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.news-content {
  line-height: 1.5;
  text-indent: 2em;
  color: #333;
}
</style>